<script lang="ts" setup>
import { IconPath, PagePath, PageTitle } from '@/common/constants'

const { contentAreaHeight } = useLayoutInfo()

const Notifications = [
  {
    title: '系统通知',
    icon: IconPath.BELL_LIGHT,
    notificationContent: '系统通知',
    path: PagePath.NOTIFICATION_SYSTEM_DETAIL,
  },
  {
    title: '活动通知',
    icon: IconPath.VOLUNTEER_LIGHT,
    notificationContent: '活动通知',
    path: PagePath.NOTIFICATION_ACTIVITY_DETAIL,
  },
]
</script>

<template>
  <view class="message-container">
    <hope-nav-bar :title="PageTitle.NOTIFICATION" is-back-icon />

    <view class="message-scroll-container">
      <scroll-view
        scroll-y class="message-container-content" :style="{
          height: `${contentAreaHeight}px`,
        }"
      >
        <view class="message-list">
          <view
            v-for="notification in Notifications" :key="notification.title" class="message-item"
            @click="() => goToPage(notification.path)"
          >
            <view class="message-item-icon">
              <image :src="notification.icon" mode="scaleToFill" class="message-item-icon-img" />
            </view>
            <view class="message-item-info">
              <text class="message-item-username ellipsis-1">
                {{ notification.title }}
              </text>
              <text class="message-item-message ellipsis-1">
                {{ notification.notificationContent }}
              </text>
            </view>
            <view class="message-item-notification">
              <view class="message-item-notification-icon">
                <image :src="IconPath.BELL_GREY" mode="scaleToFill" class="icon" />
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="message-read-all-button">
      <hope-button title="一键已读" />
    </view>
  </view>
</template>

<style lang="scss" scoped>
.message {
  &-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
  }

  &-scroll {

    &-container {
      flex: 1;
      overflow: scroll;
      background-color: $color-white;
    }

    &-content {
      height: 100%;
    }
  }

  &-list {
    display: flex;
    flex-direction: column;
    padding-inline: $padding-base;

  }

  &-item {
    display: flex;
    gap: 20rpx;
    padding-block: $padding-base;
    border-bottom: 1px solid $border-color;

    &-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex: 1;
    }

    &-icon {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      background-color: $color-primary;

      &-img {
        height: 60%;
        width: 60%;
      }
    }

    &-username {
      font-size: $font-size-lg;
      line-height: 60rpx;

    }

    &-message {
      font-size: $font-size-base;
      line-height: 60rpx;
      color: $uni-text-color-grey;
    }

    &-notification {
      display: flex;
      align-items: center;

      &-icon {
        position: relative;
        height: 50rpx;
        width: 50rpx;

        .icon {
          width: 100%;
          height: 100%;
        }

        &::before {
          content: "";
          position: absolute;
          top: -6rpx;
          right: 7rpx;
          height: 20rpx;
          width: 20rpx;
          border-radius: 50%;
          background-color: $color-primary;
        }

      }

    }
  }

  &-read-all-button {
    padding-inline: $padding-base;
    padding-top: 20rpx;
    padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
    background-color: $color-white;
  }
}
</style>
